<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sullivan-grid {
            margin-left: 100px;
            margin-top: 100px;
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: grid;
            gap: 6px;
            user-select: none;
            .sullivan-grid-item {
                position: relative;
                border: 1px solid blue;
            }
            .sullivan-grid-item-content {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 1px solid blue;
            }
        }
        .sullivan-grid-item-direction {
            background: rgba(0, 0, 0, .3)
        }
        .sullivan-grid-item-top,
        .sullivan-grid-item-bottom {
            position: absolute;
            height: 10px;
            width: 100%;
            cursor: row-resize;
        }
        .sullivan-grid-item-right,
        .sullivan-grid-item-left {
            position: absolute;
            width: 10px;
            height: 100%;
            cursor: col-resize;
        }
        .sullivan-grid-item-top {
            top: -3px;
        }
        .sullivan-grid-item-right {
            right: -3px;
        }
        .sullivan-grid-item-bottom {
            bottom: -3px;
        }
        .sullivan-grid-item-left {
            left: -3px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="../jquery.js"></script>
<script src="./grid-config.js"></script>
<script src="./utils.js"></script>
<script src="./Grid.js"></script>
<script src="./Position.js"></script>
<script src="./GridEvent.js"></script>
<script>
    let __grid;
    let __position;
    let $container = $('#container');
    const { grid, areaLayout } = gridMapTwo.pop();

    function createGridLayout ([row, col], areaLayout) {
        const refreshCallback = (area) => {
            $container.empty();
            console.log('-----------------', area)
            createGridLayout([row, col], area)
        }
        const replaceCallback = (args) => {
            console.log('-----------------', args)
        }
        __grid = new Grid({ refreshCallback, replaceCallback })
        // 创建布局盒子
        const $gridBox = __grid.createGridBox([row, col]);
        // 获取布局 css 数组
        const area = __grid.createGridArea(areaLayout);
        // 创建网格
        const $grid = __grid.createGridLayout();
        __grid.setGridAreaCss();


        $container?.html($gridBox)

        GridEvent.bind()
    }

    createGridLayout (grid, areaLayout)
</script>
</body>
</html>